<template>
    <div class="detail-container">
        <div class="detail">
            <div class="movie-fliter"></div>
            <div class="img_bg" v-if="filmDetail.albumImg" :style="{backgroundImage: `url(${filmDetail.albumImg})`}"></div>
            <div class="img_bg" v-else :style="{backgroundImage: `url(${picFix(filmDetail.img)})`}"></div>
            <div class="detail-info">
                <img :src="picFix(filmDetail.img)">
                <span class="info">
                    <span class="h1">{{filmDetail.nm}}</span>
                    <span>{{filmDetail.enm}}</span>
                    <span  class="img" v-if="filmDetail.sc">
                         <img v-for="(item,i) in star" :key="i" :src="item">
                         <span class="sc">{{filmDetail.sc}}</span>
                    </span>
                    <span v-else>{{filmDetail.bingeWatch}}想看</span>
                    <span>{{filmDetail.snum}}人评分</span>
                    <span class="cat">{{filmDetail.cat}}<span :class="['icon',filmDetail.version=='v2d imax'?'active1':'active2']"></span></span>
                    <span>{{filmDetail.src}}/{{filmDetail.episodeDur}}分钟</span>
                    <span>{{filmDetail.pubDesc}}</span>
                </span>
            </div>
        </div>
        <div class="mui-content">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner card">
                        <mt-button type='danger' size="large" >特惠购票</mt-button>
                        <span :class="flag ? ' ' : 'text-active'">{{filmDetail.dra}}</span>
                        <img src="../../images/arrow-bt.png" @click="flag=!flag" :class="flag ? 'img-active' : ' img-active2'">
                    </div>
                </div>
            </div>
            
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner meddim">
                        <p>媒体库</p>
                        <ul class="video-photos">
                            <li><video width="140px" height="80px" :src="filmDetail.videourl" controls="controls" :poster="filmDetail.videoImg"></video></li>
                            <li v-for="item in filmDetail.photos" :key="item"><img :src="picFix(item)"></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="mui-card commit">
                <p>讨论</p>
                <div class="comment-info" v-for="item in comment" :key="item.id">
                    <img :src="item.avatarUrl">
                    <span class="info">
                        <span>{{item.nick}}</span>
                        <span>给这部作品打了{{item.score}}分</span>
                        <span>{{item.content}}</span>
                        <span class="like">
                            <span>{{item.time | dateFormat}}</span>
                            <span class="mui-icon-extra mui-icon-extra-like">{{item.upCount}}</span>
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            filmId:this.$route.params.id,
            filmDetail:{},
            star:[],
            flag:false,
            comment:[],
            imgUrl1:require("../../images/star-on.png"),
            imgUrl2:require("../../images/star-off.png"),
            imgUrl3:require("../../images/star-half.png")
        }
    },
    created(){
        this.getFilmDetail()
        this.getComment()
    },
    methods:{
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace("w.h", "110.150");
            }
        },
        getFilmDetail(){
            this.$http.get('detailmovie',{
                params:{
                    movieId:this.filmId
                }
            }).then(result=>{
                if(result.status==200){
                    this.filmDetail=result.body.detailMovie
                    console.log(this.filmDetail)
                    this.getStar(result.body.detailMovie.sc)
                }
            })
        },
        getStar(sc){
            var ssc = parseInt(sc)
            ssc =parseInt(ssc / 2)
            console.log(ssc)
            for(var i=0; i<ssc; i++){
                this.star = this.star.concat(this.imgUrl1)
            }
            if(sc%2==0){
                for(var i=0; i<5-ssc; i++){
                    this.star = this.star.concat(this.imgUrl2)
                }
            }else{
                this.star = this.star.concat(this.imgUrl3)
                for(var i=0; i<5-ssc-1; i++){
                    this.star = this.star.concat(this.imgUrl2)
                }
            }
        },
        getComment(){
            this.axios.get('http://59.110.231.183:3001/comments', {
                params: {
                    movieId: this.filmId,
                },
                userId: -1,
                offset: 0,
                limit: 10,
                ts: 0,
                type: 3,
            }).then(result => {
                // console.log(result.data.data)
                this.comment = result.data.data.hotComments
                // console.log(this.comment)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
*{
    touch-action: pan-x;
}
.detail-container{
    overflow: hidden;
    width: 100%;
    .detail{
        position: relative;
        left: 0;
        width: 100%;
        height: 188px;
        color: white;
        .movie-fliter {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: #333;
        }
        .img_bg {
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            position: absolute;
            -webkit-filter: blur(1.5rem);
            filter: blur(1.5rem);
            background-size: cover;
            background-repeat: no-repeat;
            opacity: .55;
        }  
        .detail-info{
            display: flex;
            padding-left: 15px;
            padding-top: 15px;
            .info{
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                line-height:10px;
                .h1{
                    font-size: 16px;
                    font-weight: bold;
                }
                .img{
                    display: flex;
                    align-items: center;
                    img{
                        width: 15px;
                        height: 15px;
                    }
                    .sc{
                        margin-left: 20px;
                        font-size: 19px;
                    }
                }
                .cat{
                    display: flex;
                    align-items: center;
                    .icon {
                        display: inline-block;
                        -webkit-box-flex: 0;
                        flex: 0 0 auto;
                        border-radius: 2px;
                        margin-right: 3px;
                        color: #3c9fe6;
                        width: 43px;
                        height: 14px;
                    }
                    .active1 {
                        background: url('../../images/2d_max.png') no-repeat;
                        background-size: 43px 14px;
                    }
                    .active2 {
                        background: url('../../images/3d_max.png') no-repeat;
                        background-size: 43px 14px;
                    }
                }
                h1{
                    font-size: 20px;
                }
                span{
                    font-size: 13px;
                }
                span:nth-child(3){
                    font-size: 18px;
                    font-weight: bold;
                    color: orange;
                }
            }
            .mui-icon-zzd{
                margin-top: 60px;
            }
        }
    } 
    .mui-content{
        padding: 0;
        padding-bottom: 5px;
        width: 100%;
        .mui-card{
            margin-left: 0;
            width: 100%;
        }
        .card{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 13px;
            line-height: 17px;
            span{
                margin-top: 5px;
                margin-bottom: 5px;
                color: rgb(75, 75, 75);
            }
            img{
                width: 15px;
                height: 15px;
            }
            .text-active{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
            .img-active{
                -webkit-transform:rotate(180deg);
                transition-duration: 1s;
            }
            .img-active2{
                -webkit-transform: rotate(0deg);
                transition-duration: 1s;
            }
        }
        .meddim{
            .video-photos{
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                align-items: center;
                overflow-x: scroll;
                white-space: nowrap;
                &::-webkit-scrollbar {
                    display: none;
                }
                li {
                    display: inline-block;
                }
                img{
                    margin-left: 10px;
                    width: 120px;
                    height: 80px;
                }
            }
        }
        .commit{
            width: 100%;
            padding: 20px 20px;
            .comment-info{
                display: flex;
                border-bottom: 1px solid rgb(173, 173, 173);
                padding: 15px 0;
                img{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
                .info{
                    display: flex;
                    flex-direction: column;
                    margin-left: 10px;
                    line-height: 25px;
                    span:nth-child(2){
                        font-size: 13px;
                        color: rgb(177, 177, 177);
                    }
                    .like{
                        width: 280px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: rgb(177, 177, 177);
                        .mui-icon-extra-like{
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }
}    
</style>
